<template>
  <div class="w1200 hospital_detail_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb
        class="el_breadcrumb"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          ><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><nuxt-link to="/shop"
            >{{ $cookies.get("city") || "全国" }}商城</nuxt-link
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ oInfo.goodsName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <!-- 基础信息 开始 -->
    <div class="base_info">
      <!-- 轮播图 开始 -->
      <UserCarousel :list="oInfo.goodsPics || []" />
      <!-- 轮播图 end -->

      <!-- 文字信息 开始 -->
      <div class="text_info">
        <div class="top">
          <!-- 标题 开始 -->
          <div class="title">
            <div class="name">
              <span>{{ oInfo.goodsName }}</span>
            </div>
          </div>
          <!-- 标题 end -->
          <!-- 价格 开始 -->
          <div class="price_box">
            <img
              src="@/assets/images/shop/price.png"
              class="img"
              alt="优惠价"
            />
            <span class="unit">￥</span>
            <span class="num">{{ oInfo.activityPrice }}</span>
            <span>原价:</span>
            <span class="old">￥{{ oInfo.sellPrice }}</span>
          </div>
          <!-- 价格 end -->

          <!-- 适用机构 开始 -->
          <div class="institution">
            <div class="head">
              <span class="name">适用机构</span>
              <el-popover
                v-model="showPopover"
                placement="bottom-end"
                width="400"
                trigger="click"
              >
                <div class="arrow" slot="reference">
                  <span>共{{ hospitalList.length }}家医院可使用</span>
                  <i class="el-icon-arrow-down"></i>
                </div>
                <div class="hospital_list">
                  <el-scrollbar class="el_scrollbar">
                    <ShopHosp
                      v-for="(item, index) in hospitalList"
                      :key="`hosp_${index}`"
                      :info="item"
                      :is-link="false"
                      @click.native="chooseHosp(item)"
                    />
                  </el-scrollbar>
                </div>
              </el-popover>
            </div>
            <div class="hosp_list">
              <ShopHosp :info="currentHosp" />
            </div>
          </div>
          <!-- 适用机构 end -->

          <!-- 平台严选 开始 -->
          <div class="person_box">
            <img
              src="@/assets/images/shop/yan.png"
              class="img"
              alt="平台严选"
            />
            <span class="sp2">严格审查</span>
            <span class="sp2">1对1服务</span>
            <span class="sp2">售后无忧</span>
          </div>
          <!-- 平台严选 end -->
        </div>

        <div class="btn_box">
          <el-button type="primary" class="btn" @click="goBook"
            >立即抢购</el-button
          >
          <div class="book">
            <span class="num">{{ oInfo.initAppointmentCnt }}</span>
            <span>人预定</span>
          </div>
        </div>
      </div>
      <!-- 文字信息 end -->
    </div>
    <!-- 基础信息 end -->

    <!-- 内容 开始 -->
    <div class="content">
      <!-- 左侧内容 开始 -->
      <div class="left_box">
        <!-- 商品介绍 开始 -->
        <div class="activity_box">
          <div class="row_box">
            <div class="row_head">商品介绍</div>
            <div class="row_content">
              <div
                class="outpatientIntroduce"
                v-html="oInfo.detailIntroduce"
              ></div>
            </div>
          </div>
        </div>
        <!-- 商品介绍 end -->
      </div>
      <!-- 左侧内容 end -->

      <!-- 右侧内容 开始 -->
      <div class="right_box">
        <!-- 热门医生 开始 -->
        <div class="problem_box">
          <div class="head">热门医生</div>
          <div class="list_box doctor_list">
            <ShopDoctor
              v-for="(item, index) in doctorList"
              :key="`shop_doctor_${index}`"
              :info="item"
            />
          </div>
        </div>
        <!-- 热门医生 end -->

        <!-- 人气商品 开始 -->
        <div class="problem_box">
          <div class="head">人气商品</div>
          <div class="list_box goods_list">
            <Goods
              v-for="(item, index) in goodsList"
              :key="`goods_${index}`"
              :info="item"
            />
          </div>
        </div>
        <!-- 人气商品 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>
    <!-- 内容 end -->
  </div>
</template>
<script>
import { Rate, Popover, Scrollbar } from "element-ui";
import TabMenus from "@/components/tabbar/index.vue";
import Goods from "@/components/goods/index.vue";
import Comment from "@/components/comment/index.vue";
import UserScore from "@/components/comment/score.vue";
import UserCarousel from "@/components/carousel/index.vue";
import ShopHosp from "@/components/hospital/shopHosp.vue";
import ShopDoctor from "@/components/doctor/shopDoctor.vue";
import {
  GET_GOODS_INFO,
  GET_GOODS_HOSPITALS,
  GET_GOODS_SEARCH,
  GET_DOCTOR_SEARCH,
} from "@/http/interface";

export default {
  components: {
    [Rate.name]: Rate,
    [Popover.name]: Popover,
    [Scrollbar.name]: Scrollbar,
    TabMenus,
    Goods,
    Comment,
    UserScore,
    UserCarousel,
    ShopHosp,
    ShopDoctor,
  },
  data() {
    return {
      tabbarList: [
        { name: "优惠活动", id: 0 },
        { name: "医院信息", id: 1 },
        { name: "医生团队", id: 2 },
        { name: "用户评论", id: 3 },
      ],
      carouselIndex: 0,
      hospitalId: "",
      oInfo: {},
      // hospital: {},
      // appointment: {},
      // surroundings: {},
      title: "",
      description: "",
      keywords: "",
      questionList: [],
      doctorList: [],
      commentsList: [],
      goodsList: [],
      totalScore: {},
      currentHosp: {},
      showPopover: false,
      goodsId: "",
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
        {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/goods/detail/${this.goodsId}`
                }
      ],
      link: [
        { ref: "canonical", href: `${this.$domain}/shop/${this.goodsId}` },
      ],
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios, params }) {
    let _params = { id: params.id };
    let res = await $axios.get(GET_GOODS_INFO, { params: _params });
    let oInfo = res.data || {};
    console.log(oInfo.goodsPics);

    // 适用机构
    let h = await $axios.get(GET_GOODS_HOSPITALS, { params: params });
    let hospitalList = h.data || [];
    let currentHosp = hospitalList[0] || {};

    // 社区问答
    // let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: { pageNumber: 1, pageSize: 10 } })
    // let qbj = qes.data || {}
    // let questionList = qbj.list || []

    // 医生团队
    let des = await $axios.get(GET_DOCTOR_SEARCH, {
      params: { pageNumber: 1, pageSize: 5 },
    });
    let dobj = des.data || {};
    let doctorList = dobj.list || [];

    // 用户评价
    // let comes = await $axios.get(GET_HOSPITAL_USERCOMMENTS, { params, params });
    // let obj = comes.data || {};
    // let commentsList = obj.list || [];
    // let totalScore = obj.summary || {};

    // 商品信息
    let ges = await $axios.get(GET_GOODS_SEARCH, {
      params: { pageNumber: 1, pageSize: 5 },
    });
    let gobj = ges.data || {};
    let goodsList = gobj.list || [];

    return {
      oInfo,
      hospitalId: query.id,
      title: oInfo.seoTitle,
      keywords: oInfo.seoKeywords,
      description: oInfo.seoDescription,
      // questionList,
      goodsList,
      hospitalList,
      currentHosp,
      doctorList,
      goodsId: params.id,
      // caseList,
      //commentsList,
      // totalScore,
    };
  },
  mounted() {},
  methods: {
    // 动态获取className
    getClassName(index) {
      if (index % 3 == 0) {
        return "";
      }
      if (index % 3 == 1) {
        return "blue";
      }
      if (index % 3 == 2) {
        return "dark_blue";
      }
    },

    // 去预约
    goBook() {
      let params = {};
      params.id = this.oInfo.id;
      params.source = "goods";
      params.hospitalId = this.currentHosp.id;
      this.$routerPush("/appoint", params);
    },

    // 选择医院
    chooseHosp(row) {
      this.currentHosp = row;
      this.showPopover = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/shop/detail.less";
</style>